<!-- 
  @name: 扫码加注(调试)
  @date: 2020.4.7
 -->
<template>
	<view class="content">
		<!-- 加注前填写区 -->
		<view v-show="!doing">
			<view class="shuru">
				<!-- 导航栏 -->
				<view class="nav-title">
					<view class="img" @tap="navigate">
						<view class="i"></view>
					</view>
					<view class="text">扫码加注</view>
				</view>
				<!-- 顶部区域 -->
				<view class="topview"></view>
				
				<!-- 输入区 -->
				<view class="cardview">
					<view class="item">
						<view class="title">请输入加注量</view>
						<view class="cont">
							<view class="input">
								<input type="digit" class="int" v-model.trim="fillNum" />
							</view>
							<view class="danwei">{{units}}</view>
						</view>
					</view>
					<view class="item">
						<view class="title">加注金额(自动计算，无需输入)</view>
						<view class="cont">
							<view class="input">
								<view class="icon">￥</view>
								<text class="int">{{fillMoney}}</text>
							</view>
							<view class="danwei">元</view>
						</view>
					</view>
					<button class="btn_submit" @tap="submit">开始加注</button>
				</view>
			</view>
		</view>
		
		<!-- 加注显示区 -->
		<view class="status" v-show="doing">
			<view class="fill-info">加注中...</view>
			<!-- 动态图 -->
			<view class="change">
				<view class="dongtu">
					<view class="wave">
						<text class="filled-tip" v-if="showTip">加注完成</text>
					</view>
					<view class="wave-mask" :style="{top: cirHeight}"></view>
				</view>
			</view>
			<!-- 数据变化 -->
			<view class="data-msg">
				<view class="item">
					<view class="t1">{{shootMoney}}</view>
					<view class="t2">加注金额（元）</view>
				</view>
				<view style="flex: 1;"></view>
				<view class="item">
					<view class="t1">{{shootAmount}}</view>
					<view class="t2">加注量（升）</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				macCode: '',  //机器码
				ureaPrice: 1,  //单价
				units: 'L',  //计量单位
				fillMoney: 0,  //加注金额
				fillNum: '',  //加注数量
				recordCode: '',  //支付后的订单号
				doing: false,  //是否正在加注，true正在加注，false刚进入页面
				usingRate: 0,  //当值为0时，没有波浪填充，当值为1时，全部填充
				showTip: false,  //是否显示完成提示语
				shootAmount: '',  //实时加注量
				shootMoney: '',  //实时加注金额
			}
		},
		computed: {
			cirHeight() {
				return (100 - 265 * this.usingRate) + 'rpx';
			}
		},
		watch: {
			fillNum(val) {
				if(parseFloat(val) > 0) {
					this.fillMoney = this.$operation(val, '*', this.ureaPrice);
				} else {
					this.fillMoney = 0;
				}
			}
		},
		onLoad(e) {
			console.log('e',e);
			this.macCode = e.macCode;
			this.ureaPrice = parseFloat(e.ureaPrice);
			this.units = e.units == 0 ? 'L' : 'kg';
			uni.$on('linkListen', this.linkListen);
		},
		onShow() {
			this.$socket.dispatch('check');
		},
		onUnload() {
			uni.$off('linkListen', this.linkListen);
		},
		methods: {
			//返回上一页
			navigate() {
				uni.navigateBack({
					delta: 1
				});
			},
			//显示loading
			showLoading() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
			},
			//提交
			submit() {
				if(!this.fillNum) {
					this.$showToast('请输入加注量！');
					return;
				}
				this.showLoading();
				data = {
					msgtype:"fill",
					data:{
						macCode: this.macCode,
						token: this.$store.state.token,
						fillMoney: parseFloat(this.fillMoney),
						fillNum: parseFloat(this.fillNum)
					}
				}
				let data = 
				this.$socket.dispatch('send', JSON.stringify(data));
			},
			//监听实时数据信息
			linkListen(res) {
				console.log(res);
				if(res.msgtype === 'filling') {
					this.lisFilling(res.data);
				} else if(res.msgtype === 'filled') {
					this.lisFilled(res.data);
				} else if(res.msgtype === 'fillreply') {
					uni.hideLoading(); 
					if(!res.data.success) {
						this.$showToast(res.data.msg);
					} else {
						this.$showToast('请提枪加注！');
					}
				}
			},
			//实时加注状态
			lisFilling(res) {
				if(!this.doing) {
					uni.hideLoading();
					this.doing = true;
				}
				this.shootMoney = res.shootMoney;
				this.shootAmount = res.shootAmount;
				this.usingRate = res.shootAmount / this.fillNum;
				if(this.usingRate >= 1) {
					this.showTip = true;
					this.showLoading();
				}
			},
			//订单完成(此时已完成整个加注操作，可以跳转完成页面)
			lisFilled(res) {
				this.usingRate = 1;
				this.showTip = true;
				this.showLoading();
				setTimeout(() => {
					uni.hideLoading();
					this.$store.commit('setTmpData', JSON.stringify(res));
					uni.navigateTo({ url: './scanSuc' });
				}, this.$tmp.TIME_SUC);
			}
		}
	}
</script>

<style lang="scss">
	.shuru {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	/* 导航栏 */
	.nav-title {
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		right: 0;
		z-index: $z-index-nav-title;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.img {
			width: 70rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.i {
				width: 20rpx;
				height: 35rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14T_3OAIeWOAAALxWOR2qw455.png');
			}
		}
		.text {
			flex: 1;
			margin-right: 62rpx;
			text-align: center;
			font-size: 32rpx;
			color: $color-white;
		}
	}
	
	/* 顶部区域 */
	.topview {
		width: 750rpx;
		height: 481rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16MLlqAW4L0AABaL2UcOS4514.png');
	}
	
	/* 输入区 */
	.cardview {
		width: 700rpx;
		margin-top: -80rpx;
		border-radius: 20rpx;
		background-color: $color-white;
		box-shadow: 0 0 13rpx 2rpx rgba(62,66,99,0.12);
		.item {
			width: 100%;
			margin-top: 30rpx;
			padding-left: 74rpx;
			.title {
				width: 100%;
				margin-top: 63rpx;
				color: $color-grey;
			}
			.cont {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				.input {
					width: 386rpx;
					margin-top: 37rpx;
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					border-bottom: 1rpx solid $color-list;
					.icon {
						margin-right: 30rpx;
						font-size: 50rpx;
						font-weight: bold;
						color: $color-text-primary;
					}
					.int {
						height: 70rpx;
						margin-bottom: 8rpx;
						font-size: 60rpx;
						color: $color-text-primary;
					}
				}
				.danwei {
					margin-left: 63rpx;
					margin-bottom: 10rpx;
					font-size: 36rpx;
					color: $color-text-primary;
				}
			}
		}
		.btn_submit {
			width: 600rpx;
			margin: 150rpx 50rpx;
		}
	}
	
	/* 加注状态信息 */
	.status {
		width: 750rpx;
		height: 100vh;
		background-color: $color-white;
	}
	.fill-info {
		width: 750rpx;
		text-align: center;
		color: $color-primary;
		font-size: 30rpx;
		margin-top: 200rpx;
	}
	/* 数据变化 */
	.data-msg {
		width: 750rpx;
		margin-top: 120rpx;
		padding: 0 100rpx;
		display: flex;
		flex-direction: row;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.t1 {
				color: $color-text-primary;
				font-size: 72rpx;
				font-family: $font-family-num;
			}
			.t2 {
				margin-top: 30rpx;
				font-size: 30rpx;
				color: $color-primary;
			}
		}
	}
	/* 动态图 */
	.change {
		width: 750rpx;
		margin-top: 120rpx;
	}
	.dongtu {
		position: relative;
		margin: 0 auto;
		width: 235rpx;
		height: 235rpx;
		border-radius: 50%;
		background: #5BB8FF;
		border: 5rpx solid #5BB8FF;
		overflow: hidden;
		.wave {
			width: 235rpx;
			height: 235rpx;
			line-height: 235rpx;
			text-align: center;
			background-color: #5BB8FF;
			border-radius: 50%;
			.filled-tip {
				font-size: 30rpx;
				color: $color-white;
			}
		}
		.wave-mask {
			position: absolute;
			top: 0;
			left: 50%;
			width: 470rpx;
			height: 470rpx;
			border-radius: 40%;
			background-color: #fff;
			z-index: $z-index-public;
			transform: translate(-50%, -70%) rotate(0);
			animation: toRotate 5s linear 0s infinite;
		}
	}
	@keyframes toRotate {
		50% {
			transform: translate(-50%, -70%) rotate(180deg);
		}
		100% {
			transform: translate(-50%, -70%) rotate(360deg);
		}
	}
</style>
